<template>
    <div class="clist pbpage">
        <ul>
            <li v-for="(l, i) in films" class="citem" :key="i">
                <router-link :to="{ name: 'film', params: { filmId: l.filmId }, query: { name: l.name } }" class="abox">
                    <img :src="l.poster" class="leftimg" alt="">

                    <div class="right">
                        <h2 class="title">{{ l.name }} 
                            <span class="dd"> {{ l.item.name }}</span>
                        </h2>
                        <p class="info-col">
                          观众评分: <span v-if="l.grade" class="grade">{{ l.grade }}</span>
                        </p>
                        <p class="info-col actor">
                            主演: 
                            <span v-for="(act, index) in l.actors" :key="index">
                            {{ act.name }} 
                            </span>
                        </p>
                        <p class="info-col">
                            <span>{{ l.nation }} |</span>
                            <span> {{ l.runtime }} 分钟</span>
                        </p>
                    </div>

                    <!-- 点击购票 跳转 ==》“选择电影院” 页面 -->
                    <van-button @click.stop.prevent="gotofilmcinemas(l)"  class="buybtn" :class="type == 1 ? '' : 'yucolor'"> {{ type == 1 ? '购票' : '预购' }}</van-button>
                </router-link>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    props: {
        films: Array,
        type: [String, Number]
    },
    methods:{
        gotofilmcinemas(l) {
            console.log(l)
            this.$router.push({
                name: "film-cinemas",
                params: {
                    filmId: l.filmId
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped> 
  .clist{
    margin-top:0;
    ul{
      .citem{
        margin-top:10px;
        width:100%;
        padding:5px 15px;
        .abox{
          display: flex;
          position: relative;
          .buybtn{
            position: absolute;
            right:0;
            top:50%;
            transform: translateY(-50%);
            border: 1px solid #ff5f16;
            line-height: 25px;
            height: 25px;
            width: 50px;
            color: #ff5f16;
            font-size: 13px;
            text-align: center;
            border-radius: 2px;
            padding:0;
          }
          .yucolor{
            color: #ffb232 !important;
            border-color: #ffb232 !important;
          }
          .leftimg{
            width:66px;
            height:94px; 
          }
          .right{
            width: calc(100% - 116px);
            padding: 0 10px;
            margin-top:8px;
            .title{
                color: #191a1b;
                font-size: 16px;
                height: 22px;
                line-height: 22px;
                margin-right: 5px;
                overflow: hidden;
                -o-text-overflow: ellipsis;
                text-overflow: ellipsis;
                white-space: nowrap;
                .dd{
                      font-size:11px;
                      color: #fff;
                      background-color: #d2d6dc;
                      height: 14px;
                      line-height: 14px;
                      padding: 0 2px;
                      border-radius: 2px;
                }
            }

            .info-col{
              margin-top:3px;
              overflow: hidden;
              -o-text-overflow: ellipsis;
              text-overflow: ellipsis;
              white-space: nowrap;
              width: 100%;
              font-size: 13px;
              margin-top: 4px;
              color: #797d82;
              .grade{
                color: #ffb232;
                font-size: 14px;
              }
            }
          }
        }
      }
    }
  }
</style>